<template>
<div class="mainpage">
    <div class="userinfoclass">
        <img class="index_img" :src="userinfo.avatarUrl" alt="">
        <button class="login" open-type="getUserInfo" @getUserInfo="getUserInfo">登录</button>
        <p class="nickname">{{userinfo.nickName}}</p>
    </div>
</template>

<script>
export default {
  data () {
    return {
      userinfo: {},
      isShow: false
    }
  },

  methods: {
    handleUserInfo () {
      wx.getUserInfo({
        success: (data) => {
          console.log(data)
          this.userinfo = data.userinfo_
          this.isShow = true
        },
        fail: () => {
          console.log('获取失败')
        }
      })
    },
    getUserInfo (data) {
      console.log(data)
      if (data.mp.detail.rawData) {
        this.handleUserInfo()
      }
    }
  }
}
</script>

<style>
.userinfoclass{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.index_img{
    width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
    margin:100rpx 0;
}
.nickname{
    font-size: 40rpx;
    margin: 100rpx 0;
}
</style>